<template>
	<view class="content">
		<div class="logo"></div>

		<!-- 登录页面主体 start -->
	<!-- 	<div class="login-body">
			
			<div class="field"><input type="text" placeholder="请输入用户名" v-model="username" /></div>
			
			<div class="field"><input type="password" placeholder="请输入密码" v-model="password" /></div>
			
			<button class="login" @click="login">登录</button>
		</div> -->
		
		<div class="login-form">
			<div class="login-field">
				<image src="../../static/login_admin_act@2x.png" mode="widthFix"></image>
				<input type="text" placeholder="请输入用户名" v-model="username" clearable="clearable" />
			</div>
			<div class="login-field">
				<image src="../../static/login_psw_act@2x.png"  style="width: 40rpx;left:18rpx" mode="widthFix"></image>
				<input type="password" placeholder="请输入密码" v-model="password" clearable="clearable" />
			</div>
			<button class="login-button" @click="login">登录</button>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		};
	},
	onLoad() {},
	methods: {
		showMsg(msg) {
			uni.showModal({
				content: msg,
				showCancel: false
			});
		},
		login() {
			//后面改成form表单rule验证
			if (this.username.trim() == '') {
				this.showMsg('用户名不能为空');
				return;
			}
			if (this.password.trim() == '') {
				this.showMsg('密码不能为空');
				return;
			}
			uni.request({
				url:this.baseUrl+  '/mobile/login',
				method: 'POST',
				data: {
					sno: this.username,
					password: this.password
				},
				headers: {
					
				},
				success: res => {
					if (res.statusCode == 200) {
						if (res.data.result == true) {
							if (res.data.roles[0] == '学院书记') {
								uni.setStorageSync('satoken', res.data.token);
								// this.$router.push({ path: '/pages/TabBar/index/index' });
								uni.switchTab({
									url: '/pages/TabBar/index/index',
									success: function(e) {
									        var page = getCurrentPages().pop();
									        if (page == undefined || page == null) return;
									        page.onLoad();
									    }
								});
							} else {
								this.showMsg('用户无权限');
							}
						} else {
							this.showMsg('用户名密码是否正确');
						}
					}
				}
			});
		}
	}
};
</script>


<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		padding: 0 100rpx;
	}
	.logo{
		/* width: 25%;	 */
		/* height: 25%; */
		width: 348rpx;
		height: 200rpx;
		margin: 100rpx auto;
		background-image: url(../../static/login_logo.png);
		-moz-background-size:100% 100%; background-size:100% 100%;
	}
	
	/**主体内容 */
	.login-body {
	  margin: 0 auto;
	  margin-top: -20px;
	  width: 85%;
	  background: #ffffff;
	  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
	  opacity: 1;
	  border-radius: 10px;
	  padding: 60px 0;
	  height: calc(100% - 200px);
	}
	.field {
	  width: 70%;
	  margin: 0 auto;
	  margin-top: 30px;
	  border-bottom: 1px solid rgb(204, 203, 203);
	  /* 图标输入框对齐 */
	  display: flex;
	  align-items: center;
	  padding: 5px 0;
	}
	.icon {
	  font-size: 22px;
	  color: rgba(0, 0, 240, 0.5);
	}
/* 	input {
	  border: 0;
	  font-size: 26px;
	}
	input::-webkit-input-placeholder {
	  color: rgba(0, 0, 240, 0.5);
	  font-size: 13px;
	}
	input:focus {
	  outline: 0px;
	} */
/* 登录按钮 */
.login {
  width: 70%;
  margin-top: 30px;
  border: 0px;
  height: 40px;
  border-radius: 10px;
  background: rgba(34, 228, 106, 1.0);
  color: #ffffff;
}
/* button:focus {
  outline: 0px;
} */
.login-field{
	margin: 40rpx auto;
	position: relative;
}
.login-field input{
	border: 1rpx solid #CCCCCC;
	padding: 20rpx 0rpx 20rpx 80rpx;
	font-size: 24rpx;
}
.login-field image{
	position: absolute;
	width: 50rpx;
	/* height: 32rpx; */
	top: 18rpx;
	left: 10rpx;
}
.login-button{
	background: #77312A;
	color: white;
	font-size: 30rpx;
	margin-top: 100rpx;
}
</style>